<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <style>
            body {
                margin: 0;
                font-family: Arial, Helvetica, sans-serif;
            }

            .topnav {
                overflow: hidden;
                background-color: #333;
            }

            .topnav a {
                float: left;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }
            .topnav a:hover {
                background-color: #dddddd;
                color: black;
            }
            .topnav a.active {
                background-color: #4CAF50;
                color: white;
            }
            .topic-back {
                text-align: center;
                background-color: #66ffff;
            }
            #main-back {
                background-color: #66ffff;
            }
            #title {
                font-size: 60px
            }
            * {
                box-sizing: border-box;
            }

            .container {
                padding: 16px;
                background-color: white;
            }

            input[type=text], input[type=password] {
                width: 100%;
                padding: 15px;
                margin: 5px 0 22px 0;
                display: inline-block;
                border: none;
                background: #f1f1f1;
            }

            input[type=text]:focus, input[type=password]:focus {
                background-color: #ddd;
                outline: none;
            }

            hr {
                border: 1px solid #f1f1f1;
                margin-bottom: 25px;
            }

            .registerbtn {
                background-color: #4CAF50;
                color: white;
                padding: 16px 20px;
                margin: 8px 0;
                border: none;
                cursor: pointer;
                width: 100%;
                opacity: 0.9;
                font-size: 20px;
            }

            .registerbtn:hover {
                opacity: 1;
            }

            a {
                color: dodgerblue;
            }

            .signin {
                background-color: #f1f1f1;
                text-align: center;
            }

        </style>
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
        </script>
        <script type="text/javascript" src="/statics/scripts/home.js"></script>

    </head>
    <body id=main-back>
        <div class="topnav">
            <a class="active" href="#home">Home</a>
            <a href="#news">{{.Name}}</a>
            <a href="#about">About</a>
        </div>

        <div class="topic-back" style="padding-left: 16px">
            <h2 id="title">Welcome to MOVIEDASH</h2>
        </div>

        <form method="POST" id="regsubmit" action="/userhome" style="width: 500px; margin: 0 auto;">
            <div class="container">
                <h1>Register</h1>
                <hr>

                <label for="email"><b>User name</b></label>
                <input id="username" type="text" placeholder="Enter user name" name="username" required>

                <label for="pws"><b>Password</b></label>
                <input id="pwd" type="password" placeholder="Enter Password" name="pwd" required>

                <hr>
                <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
                <button id="regbtn" type="submit" class="registerbtn">Register</button>
            </div>
        </form>
    </body>
</html>